<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" style="margin-bottom: 10px">
          <div slot="header" class="clearfix box-card-header">
            <img class="index_icon" src="../assets/images/indexapp.png" alt="" />
            <span>常用应用</span>
          </div>
          <div class="box-card-body link-list">
            <router-link to="/documentManagement/departmentNotice/depNoticeList" class="link-type">
              <img src="../assets/home/gwglDzgg.png" alt="" srcset="">
              <span>部门通知</span>
            </router-link>
            <router-link to="/documentManagement/allNotice/allNoticeList" class="link-type">
              <img src="../assets/home/gwglQsbg.png" alt="" srcset="">
              <span>全委通知</span>
            </router-link>
            <router-link to="/documentManagement/matter/MyMatter" class="link-type">
              <img src="../assets/home/wjqc.png" alt="" srcset="">
              <span>事项办理</span>
            </router-link>
            <router-link to="/administration/hytz/attend" class="link-type">
              <img src="../assets/home/hytzsmall.png" alt="" srcset="">
              <span>会议通知</span>
            </router-link>
            <router-link to="/documentManagement/application/MyApplication" class="link-type">
              <img src="../assets/home/qjjj.png" alt="" srcset="">
              <span>请假申请</span>
            </router-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="margin-bottom: 10px">
          <div slot="header" class="clearfix box-card-header">
            <img class="index_icon" src="../assets/images/indexdate.png" alt="" />
            <span>日程安排</span>
          </div>
          <Schedule />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card as" style="margin-bottom: 10px">
          <div slot="header" class="clearfix box-card-header" style="width: 100%">
            <img class="index_icon" src="../assets/images/indextable.png" alt="" />
            <span>个人资料</span>
          </div>
          <div class="box-card-body">
            <div class="tx-info">
              <img src="../assets/images/zfw_tx.png" alt="个人头像" />
              <div>
                <span>姓名：{{ personalInfo.name }}</span>
                <span>用户名：{{ personalInfo.uname }}</span>
                <span>部门：{{ personalInfo.dept }}</span>
                <span>电话：{{ personalInfo.tel }}</span>
                <span>邮箱：{{ personalInfo.email }}</span>
                <span>登录IP：{{ personalInfo.IP }}</span>
                <span>上次登录时间：{{ personalInfo.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="clearfix box-card-header" style="position: relative">
            <img style="
                height: 24px;
                width: 21px;
                margin-right: 16px;
                position: absolute;
                top: 13px;
              " src="../assets/images/indextodo.png" alt="" />
            <el-tabs style="width: 100%; margin-left: 30px" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="first" :label="'待办事项（' + todoTotal + '）'">
                <el-table v-loading="loading" :data="todoList">
                  <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
                  <el-table-column label="文件标题" align="center" prop="title" width="800px"></el-table-column>
                  <el-table-column label="文件类型" align="center" prop="businessTypeName"></el-table-column>
                  <el-table-column label="发送人" align="center" prop="ownerName"></el-table-column>
                  <el-table-column label="发送时间" align="center" prop="createTime"></el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="handleDoSome(scope.row)">办理</el-button>
                      <el-button size="mini" type="primary" @click="handleDoSome(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="flex-rowr mt15">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange(true)"
                    :current-page.sync="queryParams1.pageNumber" :page-sizes="[4]" :page-size="queryParams1.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="todoTotal">
                  </el-pagination>
                </div>

              </el-tab-pane>
              <el-tab-pane :label="'待阅事项（' + toreadTotal + '）'" name="second">
                <el-table v-loading="loading" :data="toreadList">
                  <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
                  <el-table-column label="文件标题" align="center" prop="title" width="800px"></el-table-column>
                  <el-table-column label="文件类型" align="center" prop="businessTypeName"></el-table-column>
                  <el-table-column label="发送人" align="center" prop="agentName"></el-table-column>
                  <el-table-column label="发送时间" align="center" prop="createTime"></el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="primary" @click="handleCheck(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="flex-rowr mt15">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange(false)"
                    :current-page.sync="queryParams2.pageNumber" :page-sizes="[4]" :page-size="queryParams2.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="toreadTotal">
                  </el-pagination>
                </div>

              </el-tab-pane>
            </el-tabs>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="通知公告" :visible.sync="noticeDialog" width="620px" append-to-body custom-class="notice-detail">
      <div>
        <h2>{{ detailData.noticeTitle }}</h2>
        <editor v-model="detailData.noticeContent" :min-height="192" :read-only="true" :toolbar="[]" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Schedule from '@/components/Schedule/Schedule.vue'
import { getInfo } from '@/api/login'
import { ToDoList, ToReadList } from '@/api/index'
import { parseTime } from "@/utils/buspost.js";
export default {
  components: {
    Schedule,
  },
  name: "Index",
  dicts: ["sys_notice_status", "sys_notice_type", "link_status"],
  data() {
    return {
      noticeDialog: false,
      // 版本号
      version: "3.8.3",
      queryParams1: {
        pageNumber: 1,
        pageSize: 4
      },
      queryParams2: {
        pageNumber: 1,
        pageSize: 4
      },
      noticeData: [],
      loading: false,
      detailData: {},
      activeName: "first",
      todoList: [],
      toreadList: [],
      todoTotal: 0,
      toreadTotal: 0,
      personalInfo: {
        name: "",
        dept: "",
        tel: "",
        email: "",
        IP: "",
        time: "",
        uname: ""
      },
    };
  },
  mounted() {
    this.UserInfo()
    this.getTodoList(this.queryParams1)
    this.getToreadList(this.queryParams2)
  },
  methods: {
    async handleCurrentChange(value) {
      value ? await this.getTodoList(this.queryParams1) : await this.getToreadList(this.queryParams2)
    },
    async handleSizeChange(value) {
      // await this.getTodoList(this.queryParams1)
    },
    getTodoList(params) {
      ToDoList(params).then(res => {
        this.todoList = res.data.records
        this.todoTotal = res.data.total
      })
    },
    getToreadList() {
      ToReadList(this.queryParams2).then(res => {
        this.toreadList = res.data.records
        this.toreadTotal = res.data.total

      })
    },
    UserInfo() {
      getInfo().then(res => {
        this.personalInfo.name = res.user.nickName
        this.personalInfo.dept = res.user.deptName
        this.personalInfo.tel = res.user.phonenumber
        this.personalInfo.email = res.user.email
        this.personalInfo.IP = res.user.loginIp
        this.personalInfo.time = parseTime(res.user.loginDate, '{y}-{m}-{d} {h}:{i}:{s}')
        this.personalInfo.uname = res.user.userName
      })

    },
    handleClick(_id) {
      // detailNotice({noticeId: _id}).then(res => {
      //   this.noticeDialog = true
      //   this.detailData = res.data
      // })
    },
    handleDoSome(row) {
      console.log(row);
      switch (row.businessTypeName) {
        case '会议通知':
          this.$router.push({ path: '/administration/hytz/approve', query: { meetName: row.title } })
          break;
        case '全委通知':
          this.$router.push({ path: '/documentManagement/allNotice/CompleteAllNotice', query: { title: row.title } })
          break;
        case '部门通知':
          this.$router.push({ path: '/documentManagement/departmentNotice/CompleteDepNotice', query: { title: row.title } })
          break;
        case '事项办理':
          this.$router.push({ path: '/documentManagement/matter/WaitMatter', query: { title: row.title } })
          break;

        default:
          break;
      }
    },
    handleCheck(row) {
      console.log(row.businessTypeName);
      switch (row.businessTypeName) {
        case '会议通知':
          this.$router.push({ path: '/administration/hytz/attend', query: { meetName: row.title } })
          break;
        case '全委通知':
          this.$router.push({ path: '/documentManagement/allNotice/allNoticeList' })
          break;
        case '部门通知':
          this.$router.push({ path: '/documentManagement/departmentNotice/depNoticeList', query: { title: row.title } })
          break;
        // case '事项办理':
        //   this.$router.push({ path: '/documentManagement/matter/WaitMatter', query: { title: row.title } })
        //   break;

        default:
          break;
      }
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  .mt15 {
    margin-top: 15px;
  }


  .flex-rowr {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .link-list {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;

    .link-type {
      display: flex;
      align-items: center;
      flex-direction: column;

      img {
        width: 80px;
        height: 80px;
      }

      span {
        font-weight: 500;
        font-size: 12px;
        color: #555555;
      }
    }
  }

  .box-card {
    height: calc((100vh - 134px) / 2);

    .text {
      img {
        margin-top: 6px;
      }

      span {
        line-height: 40px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #e0eaff;
        font-size: 14px;
      }
    }

    .put-in-storage-box {
      text-align: center;

      img {
        cursor: pointer;
        height: calc((100vh - 134px) / 2 - 80px);
      }
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .box-card-header {
      display: flex;
      align-items: center;

      span {
        font-size: 18px;
      }

      .index_icon {
        height: 18px;
        width: 16px;
        margin-right: 10px;
      }
    }

    .box-card-body {
      width: 100%;
      height: 100%;

      .tx-info {
        display: flex;
        justify-content: center;
        height: 100%;
        align-items: center;

        img {
          width: 91px;
          height: 91px;
        }

        div {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 21px;
          height: 80%;

          span {
            font-size: 14px;
            color: #555;
          }
        }
      }

      .todo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 30px;
        font-size: 16px;
        color: #555;
        text-align: center;

        .blue {
          color: #2d75d7;
        }

        .green {
          color: #1cc189;
          margin-top: 20px;
        }

        .orange {
          color: #f7b41b;
        }
      }
    }

    .el-button {
      width: 50px;
      height: 25px;
      border-radius: 3px 3px 3px 3px;
      color: #fff;
    }
  }

  ::v-deep .el-card__body {
    padding: 2px 20px;
  }

  ::v-deep .el-card__header {
    padding: 5px 20px;
  }

  ::v-deep .el-table thead {
    background: #f5f7fa;
  }
}

::v-deep .as .el-card__body {
  height: calc(100% - 42px);
}
</style>